import React, { Component } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Col, Timeline } from 'antd';
import moment from 'moment';

class HdlRemark extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const { remarklist } = this.props;
    return (
      <div>
        {remarklist && remarklist.length ? (
          <Col
            style={{
              paddingTop: 14,
              marginTop: 14,
              height: 200,
              minHeight: 200,
              overflow: 'hidden',
              overflowY: 'scroll',
            }}
          >
            <Timeline>
              {remarklist.map(item => (
                <Timeline.Item key={item.operTime}>
                  <p>
                    <span style={{ marginRight: 18 }}>
                      {item.operTime ? moment(item.operTime).format('YYYY-MM-DD HH:mm:ss') : '--'}
                    </span>
                    <span>{item.operName}</span>
                  </p>
                  <p>{item.content}</p>
                </Timeline.Item>
              ))}
            </Timeline>
          </Col>
        ) : (
          '暂无数据'
        )}
      </div>
    );
  }
}

export default Form.create()(HdlRemark);
